import React from 'react';
import { getCookie } from '../utils/cookie.ts';
import { hideLoading, showLoading } from '../utils/loading.ts';
import axiosInstance from '../api/axiosInstance.ts';
import { useNavigate } from 'react-router-dom';

export const DashBoard: React.FC = () => {
  const username = getCookie('username');
  const navigate = useNavigate();

  const handleLogout = async () => {
    try {
      showLoading();
      const response = await axiosInstance.post('/logout', {
        username,
      });
      console.log('Logout successful:', response.data);
      navigate('/');
    } catch (error) {
      console.error('Logout failed:', error);
    } finally {
      hideLoading();
    }
  };

  return (
    <div>
      <h1>Dashboard</h1>
      <div>Welcome, {username}!</div>

      <button onClick={handleLogout}>logout</button>
    </div>
  );
};
